<template>
    <view class="container">
        <template v-if="messageList.total > 0">
            <view @tap="navToHouseDetail" :data-index="index" class="item" v-for="(item, index) in messageList.data"  >
                <view class="df ac js">
                    <view class="df ac" style="width: 80%">
                        <image src="/static/icon/icon_msg.png" class="icon_msg"></image>
                        <view class="fs32 flex-grow-1 single-line">{{ item.title }}</view>
                    </view>
                    <view class="fs24 col3">{{ item.createtime_text }}</view>
                </view>

                <view class="detail tripple-line">{{ item.content_text }}</view>
            </view>
            <u-loadmore v-if="messageList.total > 9" :status="loadStatus" fontSize="24" line loading-text="努力加载中" loadmore-text="轻轻上拉"  nomore-text="没有更多了" />
        </template>
        <template v-else>
			<u-empty
			        mode="data"
					text="暂无数据"
					textSize="24"
			        icon="/static/images/none-data.png"
			>
			</u-empty>
        </template>
    </view>
</template>

<script>
const app = getApp();

const functions = require('../../../utils/functions.js');

export default {
    data() {
        return {
			type:'',
			loadStatus:'loadmore',
            // 消息列表
            messageList: {
                total: 0,
                current_page: 0,
                last_page: 1,
                data: []
            }
        };
    },
    onLoad: function (options) {
		this.type = options.type || 0;
        this.initData();
    },
    onPullDownRefresh: function () {
        uni.showNavigationBarLoading(); //在标题栏中显示加载

        var that = this; //模拟加载

        setTimeout(function () {
            that.initData();
            uni.stopPullDownRefresh(); //停止下拉刷新
        }, 1500);
    },
    onReachBottom: function () {
        if (this.messageList.current_page >= this.messageList.last_page) {
            this.loadStatus='nomore';
            return false;
        } else {
            this.getmessageList();
        }
    },
	methods: {
        navToHouseDetail(event) {
            var index = Number(event.currentTarget.dataset.index);
            var info = this.messageList.data[index];

            if (info.type == 2 && info.house_id > 0) {
                uni.navigateTo({
                    url: '/pages/house/building_detail/building_detail?id=' + info.house_id
                });
            } else {
                uni.navigateTo({
                    url: '/pages/chat/system_msg_detail/system_msg_detail?id=' + info.id
                });
            }
        },

        // 获取消息列表信息
        getmessageList: function () {
            var that = this;
            var json = {
                city: that.now_city,
				classify: that.type
            };
            json.page = Number(that.messageList.current_page) + 1;
            Object.assign(json, this.searchCheckJson);

            if (json.page > 1 && that.messageList.current_page >= that.messageList.last_page) {
                functions.toast('已加载到底部了');
				this.loadStatus='nomore';
                return false;
            }
			this.loadStatus='loading';
            functions.getAjaxList(that, '/api/xiluhouse/chat/message_list', json, function (res) {
                var messageList = res.data;

                if (json.page > 1) {
                    var now_messageList_data = that.messageList.data || [];
                    var now_messageList_data = now_messageList_data.concat(messageList.data);
                    messageList.data = now_messageList_data;
                }
				if(messageList.current_page >= messageList.last_page){
					that.loadStatus='nomore';
				}

                that.messageList=messageList
            });
        },

        // 获取所有可下拉刷新更新的数据
        initData: function () {
            var that = this;
            that.messageList.current_page= 0
            that.getmessageList();
        }
    }
};
</script>
<style>
@import url('@/static/css/old_project.css');
.item {
    padding: 30rpx 0;
    border-bottom: 1px solid #f4f3f3;
    margin: 0 40rpx;
}
.icon_msg {
    width: 45rpx;
    height: 45rpx;
    border-radius: 50%;
    margin-right: 15rpx;
}
.detail {
    font-weight: 400;
    color: #333333;
    padding-top: 20rpx;
    line-height: 39rpx;
}
</style>
